<template>
  <div class="bao">
    <h2 class="title">限时爆款&emsp;超级低价</h2>
    <div class="huodong">
      <span @click="qianggou(index)" :class="{active:currentIndex == index}" v-for="(item,index) in huodongList" :key="index">{{(item)}}</span>&emsp;
    </div>
    <div class="baolist" v-if="(currentIndex == 0)">
      <div class="item" v-for="item in baoList" :key="item.id">
        <div class="pic">
          <img :src="item.picture" alt="">
        </div>
        <div class="right">
          <div class="name">{{item.name}}</div>
          <!-- <h3 class="info">4546</h3> -->
          <div class="info2">
            <div class="priceinfo">
              <p>爆爆团价</p>
              <div class="price">
                <span class="jine">￥{{item.min_price}}</span>&nbsp;
                <span :class="item.promotion_info ? 'zhekou' :''">{{item.promotion_info.substring(0,4)}}</span>
              </div>
                <!-- <p class="yuanjia">￥{{item.min_price}}</p> -->
            </div>
            <div class="priceinfo2">
              <p class="qiang" @click="zhuangtai(item)">{{item.status ? '马上抢':'已抢'}}</p>
              <p>已售{{item.month_saled}}份</p>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="baolist" v-if="(currentIndex == 1)">
      <div class="item" v-for="item in shangxinList" :key="item.id">
        <div class="pic">
          <img :src="item.picture" alt="">
        </div>
        <div class="right">
          <div class="name">{{item.name}}</div>
          <!-- <h3 class="info">4546</h3> -->
          <div class="info2">
            <div class="priceinfo">
              <p>爆爆团价</p>
              <div class="price">
                <span class="jine">￥{{item.min_price}}</span>&nbsp;
                <span :class="item.promotion_info ? 'zhekou' :''">{{item.promotion_info.substring(0,4)}}</span>
              </div>
                <!-- <p class="yuanjia">￥{{item.min_price}}</p> -->
            </div>
            <div class="priceinfo2">
              <p class="qiang">{{item.status ? '马上抢':'已抢'}}</p>
              <p>已售{{item.month_saled}}份</p>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import {tuan_list} from "../api/index.js";
export default {
  data() {
    return {
      currentIndex : 0,
      huodongList:['正在抢购','上新预告'],
      baoList:[],
      shangxinList:[]
    };
  },
  methods: {
    qianggou(index){
      this.currentIndex = index
      if (index ==  1) {
         tuan_list(
     {
        status: 0,
      },
    ).then((res) => {
      console.log(res);
       this.shangxinList  = res.data.list
    });
      }
      
    },
    zhuangtai(item){
      item.status = 0
    }
  },
  mounted() {
    tuan_list(
     {
        status: 1,
      },
    ).then((res) => {
      console.log(res);
      
       this.baoList  = res.data.list
    });
   
  },
};
</script>

<style scoped>
.title {
  width: 100%;
  height: 100px;
  text-align: center;
  line-height: 100px;
  background-color: orange;
  color: #fff;
}
.huodong {
  width: 100%;
  height: 60px;
  line-height: 60px;
  padding: 0 15px;
  background-color: orangered;
  color: #fff;
  font-size: 18px;
}
.huodong  span {
  padding: 0 15px;
  /* text-align: center; */
}
.huodong  span.active {
  border-bottom: 2px solid rgb(121, 245, 121)
}
.baolist {
  padding: 0 15px;
  height: 450px;
  overflow: auto;
  background-color: #ccc;
}
.baolist .item {
  display: flex;
  padding: 10px;
  width: 100%;
  height: 150px;
  background-color: #fff;
  border-radius: 10px;
  margin-bottom: 20px;
}
.baolist .item .pic {
  width: 130px;
  height: 130px;
  /* background-color: skyblue; */
  margin-right: 10px;
}
.baolist .item .pic img {
  width: 100%;
}
.baolist .item .right {
  flex: 1;
}
.baolist .item .right p {
  color: orangered;
  font-size: 12px;
}
.baolist .item .right .price {
  width: 100%;
  margin: 5px 0;
}
.baolist .item .right .price .jine {
  color: orangered;
}
.baolist .item .right .price .zhekou {
  padding: 2px 4px;
  color: orangered;
  font-size: 10px;
  border-radius: 3px;
  border: 1px solid orangered;
}
.baolist .item .right .yuanjia {
  color: #ccc;
  text-decoration: line-through;
}
.baolist .item .right .info2 {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  height: 80px;
  margin-top: 30px;
}
.baolist .item .right .info2 .qiang {
  width: 70px;
  height: 30px;
  background-color: orangered;
  color: #fff;
  border-radius: 30px;
  text-align: center;
  line-height: 30px;
  margin: 10px 0;
}
</style>

